<template>
  <div class="banner-box">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgs" :key="item.bannerid">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "BannerCom",
  data() {
    return {
      imgs: [],
    };
  },
  created() {
    this.$http({
      url: "banner/list",
    }).then((res) => {
      let msg = res.data;
      if (msg.code == 200) {
        this.imgs = msg.data;
      }

      //简单粗暴的理解：此处的$nextTick等价于 imgs引起的updated;
      // this.$nextTick(() => {});
      // 深入响应式的原理：
      // vue2中，当数据改变时，并不会理解更新dom。而是会把数据引起的dom更新放在一个异步更新队列里进行排队。
      //         等到下次事件循环更新队列时,才会执行队列的代码(进行dom的处理)，这样的话，意味着程序员没法在更新数据后，使用新的dom
      //         所以,vue提供了一个$nextTick()，只需要程序员把操作新dom的代码传给$nextTick，$nextTick()内部会在dom重新渲染之后，调用传入的代码
    });
  },
};
</script>

<style scoped>
.banner-box{
  padding: 8px 8px .5rem;
  background: #ededed;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 9.375rem;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe {
  border-radius: 0.9375rem;
}
.my-swipe img {
  width: 100%;
  height: 9.375rem;
}
</style> 